<template>
  <div class="father">
    <h2 class="context">父组件</h2>
    <div>传值的数据：{{ value }}</div>
    <div>儿子传的值：{{ sonValue }}</div>
    <div>孙子传的值($attrs)：{{ grandSonValue }}</div>
    <Son
      :value="value"
      :value2="value2"
      :sendData="getSonData"
      :getGrandSonData="getGrandSonData"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, provide } from "vue";
import Son from "../Son/index.vue";

let value = ref("我是你爸爸");
let sonValue = ref("等待传值");
let grandSonValue = ref("等待传值");
let value2 = ref("$attrs方法进行传值的数据“我是你爷爷”");
let value3 = ref("provide方法进行传值的数据“我是你爷爷”");
// 儿子传值的方法
function getSonData(value: string) {
  console.log("value", value);
  sonValue.value = value;
}
// 孙子传值的方法
function getGrandSonData(value: string) {
  console.log("value", value);
  grandSonValue.value = value;
}
// 向后代提供数据
provide("value3", value3);
</script>

<style lang="less" scoped>
.father {
  height: 700px;
  padding: 20px;
  font-size: 20px;
  background-color: #ccc;
  border-radius: 10px;
  box-shadow: 0 0 10px;
  .context {
    margin: 20px 0;
  }
}
</style>
